<template>
  <div id="app" >
    <div style="width: 100%; height: 60px; color: cornsilk; line-height:20px">
      <h2>任务列表</h2>
    </div>
    <div style="display: flex; width: 100%; height: 100%; border:1px solid #eee">
      <div style="width: 20%; border: #cccccc 1px solid">
        <el-aside width="100%" style="background-color: rgb(233, 241, 246)">
          <el-menu :router=true :default-active="$route.name" unique-opened="true">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-chicken"></i>name1</template>
                <el-menu-item-group>
                  <el-menu-item index="test1">test1</el-menu-item>
                  <el-menu-item index="test2">test2</el-menu-item>
                  <el-menu-item index="test3">test3</el-menu-item>
                  <el-menu-item index="test4">test4</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-chicken"></i>name2</template>
              <el-menu-item-group>
                <el-menu-item index="test1">test1</el-menu-item>
                <el-menu-item index="test2">test2</el-menu-item>
                <el-menu-item index="test3">test3</el-menu-item>
                <el-menu-item index="test4">test4</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-chicken"></i>name3</template>
              <el-menu-item-group>
                <el-menu-item index="test1">test1</el-menu-item>
                <el-menu-item index="test2">test2</el-menu-item>
                <el-menu-item index="test3">test3</el-menu-item>
                <el-menu-item index="test4">test4</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
      <div style="width: 80%; border: burlywood 1px solid;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    }
  }
}
</script>

<style>
ul,
li {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  width: 100vw;
  height: 100vh;
  background: url("../assets/view2.jpg") no-repeat;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  position: absolute;
  display: flex;
  position: absolute;
  justify-content: center;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
<!--<template>-->
<!--  <div id="app">-->

<!--    <div class="out">-->
<!--      <div class="navBox" v-html="navEle"></div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'App',-->
<!--  data() {-->
<!--    return {-->
<!--      navEle: '',-->
<!--      navList: [{-->
<!--        id: 1,-->
<!--        name: '总览',-->
<!--        parentid: null-->
<!--      },-->
<!--      {-->
<!--        id: 2,-->
<!--        name: '山东',-->
<!--        parentid: 1-->
<!--      },-->
<!--      {-->
<!--        id: 3,-->
<!--        name: '河北',-->
<!--        parentid: 1-->
<!--      },-->
<!--      {-->
<!--        id: 4,-->
<!--        name: '河南',-->
<!--        parentid: 1-->
<!--      },-->
<!--      {-->
<!--        id: 5,-->
<!--        name: '济南',-->
<!--        parentid: 2-->
<!--      },-->
<!--      {-->
<!--        id: 6,-->
<!--        name: '青岛',-->
<!--        parentid: 2-->
<!--      },-->
<!--      {-->
<!--        id: 7,-->
<!--        name: '烟台',-->
<!--        parentid: 2-->
<!--      },-->
<!--      {-->
<!--        id: 8,-->
<!--        name: '石家庄',-->
<!--        parentid: 3-->
<!--      },-->
<!--      {-->
<!--        id: 9,-->
<!--        name: '唐山',-->
<!--        parentid: 3-->
<!--      },-->
<!--      {-->
<!--        id: 10,-->
<!--        name: '历下区',-->
<!--        parentid: 5-->
<!--      },-->
<!--      {-->
<!--        id: 11,-->
<!--        name: '市中区',-->
<!--        parentid: 5-->
<!--      },-->
<!--      {-->
<!--        id: 12,-->
<!--        name: '天桥区',-->
<!--        parentid: 5-->
<!--      }-->

<!--      ]-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    getNav(pid = 1) {-->
<!--      var str = '';-->

<!--      this.navList.forEach(item => {-->
<!--        if (item.id === pid) {-->
<!--          str += `-->
<!--            <div class="title">${item.name}</div>-->
<!--            <ul class="layer1">-->
<!--            `-->
<!--        }-->
<!--        if (item.parentid === pid) {-->
<!--          str += `-->
<!--            <li>${item.name}-->
<!--              <ul class="layer2">${this.getSubNav(item.id)}</ul>-->
<!--            </li>-->
<!--          `-->
<!--        }-->
<!--      })-->
<!--      this.navEle = str-->
<!--    },-->

<!--    getSubNav(id, sub = 0) {-->
<!--      var str = '';-->
<!--      sub++-->
<!--      this.navList.forEach(item => {-->
<!--        if (item.parentid === id) {-->
<!--          str += `-->
<!--            <li>-->

<!--              ${item.name}-->
<!--              <ul class="subnav${sub}">${this.getSubNav(item.id, sub)}</ul>-->
<!--            </li>-->
<!--          `-->
<!--        }-->
<!--      })-->
<!--      return str;-->
<!--    }-->

<!--  },-->
<!--  mounted() {-->
<!--    this.getNav()-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style>-->
<!--*{ padding:0; margin:0; box-sizing: border-box; list-style: none;}-->
<!--.out{ width:300px; background: #f4f4f4; margin:100px;}-->
<!--.out .title{ line-height: 50px; background: #007ACC; font-size:20px; color:#fff; padding-left:20px;}-->

<!--.navBox li{ background: #fff;line-height: 2.5em; }-->
<!--.layer1 > li{ background: #39BAE8;}-->
<!--.layer1 > li::before{ content: "★";padding-left:30px;padding-right:10px;  }-->
<!--.layer2 > li{ background: #B9EDF8;}-->
<!--.layer2 > li::before{ content: "◆";padding-left:50px;padding-right:10px; }-->
<!--.subnav1 > li{ background: #F5F7FA;}-->
<!--.subnav1 > li::before{  content: "◇"; padding-left:70px;padding-right:10px;}-->
<!--</style>-->
